<template>
  <el-dialog
    title="材料详情"
    width="800px"
    custom-class="gov-application-materials-add"
    :modal-append-to-body="false"
    :append-to-body="false"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <dynamicForm
      :handleType="handleType"
      :formItemData="formItemData"
      :formItemValue="formItemValue"
      ref="dynamicForm"
    />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="handleType !== 'scan'" @click="submit" :loading="loading">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import dynamicForm from '@/components/dynamicForm';
  import formItemData from './formItemData';
  export default {
    components: { dynamicForm },
    props: {
      visible: {
        type: Boolean
      },
      materialType: {
        type: Array
      },
      materialForm: {
        type: Array
      },
      materialSourceChannel: {
        type: Array
      },
      materialWhether: {
        type: Array
      },
      action: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String,
        default: () => {
          return 'edit';
        }
      }
    },
    data() {
      return { formItemData, formItemValue: {}, loading: false };
    },
    watch: {
      visible: {
        handler(val) {
          if (val) {
            if (this.action && this.action.materialId) {
              this.$nextTick(() => {
                const obj = {};
                this.formItemData.forEach((e) => {
                  obj[e.eicCode] = this.action[e.eicCode];
                });
                this.formItemValue = obj;
              });
            }
          } else {
            this.$refs['dynamicForm'].resetField();
          }
        }
      },
      materialType: {
        handler(val) {
          if (val && val.length > 0) {
            let index1, index2, index3, index4;
            this.formItemData.forEach((e, index) => {
              if (e.eicCode === 'fromId') {
                index1 = index;
              } else if (e.eicCode === 'materialTypeId') {
                index2 = index;
              } else if (e.eicCode === 'channelId') {
                index3 = index;
              } else if (e.eicCode === 'necessity') {
                index4 = index;
              }
            });

            const item1 = this.formItemData[index1];
            item1.tags = this.materialForm;
            this.formItemData.splice(index1, 1, item1);

            const item2 = this.formItemData[index2];
            item2.tags = this.materialType;
            this.formItemData.splice(index2, 1, item2);

            const item3 = this.formItemData[index3];
            item3.tags = this.materialSourceChannel;
            this.formItemData.splice(index3, 1, item3);

            const item4 = this.formItemData[index4];
            item4.tags = this.materialWhether;
            this.formItemData.splice(index4, 1, item4);
          }
        }
      }
    },
    computed: {},
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      async submit() {
        const obj = this.$refs['dynamicForm'].getFormData(true);
        if (obj.valid) {
          this.loading = true;
          if (this.action && this.action.materialId) {
            obj.data.materialId = this.action.materialId;
          }

          if (obj.data.deptId) {
            obj.data.scope = '1';
          } else {
            obj.data.scope = '0';
            obj.data.deptId = 0;
          }
          const { data } = await axios.request({
            url: '/api/v1/event/material/material',
            method: 'post',
            data: obj.data
          });
          this.loading = false;
          if (data.code === 200) {
            this.$message.success('保存材料成功');
            this.handleClose();
            this.$emit('addSuccess');
          }
        } else {
          this.$message.error('请按照要求标红的字段');
        }
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-application-materials-add {
    .el-dialog__body {
      height: 400px;
      overflow-y: auto;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
